<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		
		var brands = {},
    		brandsData = [],
    		versions = {},
    		drilldownSeries = [];
		
		var csv = (document.getElementById('tsv').innerHTML).split("\n");
		
		// 데이터 파서
		for (var i in csv) {
// 		$.each(str[0], function(i, name) {
			var brand, version;
			
			var str = csv[i].split("\t");
			str[1] = parseFloat(str[1].replace("%",""));
			
			var name = str[0];
			name = name.split(' -')[0];
			version = name.match(/([0-9]+[\.0-9x]*)/);
			
			if (version) version = version[0];
			
			brand = name.replace(version, '').trim();
			
			if (!brands[brand]) {
                brands[brand] = str[1];
            } else {
                brands[brand] += str[1];
            }

// 			brands[brand] += str[1];.toFixed(2)
			
			if (!versions[brand]) {
            	versions[brand] = [];
			}
            versions[brand].push(['v' + version, str[1]]);
			
// 			console.log(brand + " ~ " + version);
// 		});
		}
		
		$.each(brands, function (name, y) {
            brandsData.push({ 
                name: name, 
                y: y,
                drilldown: versions[name] ? name : null
            });
        });
		
		console.dir(brandsData);
		
		$.each(versions, function (key, value) {
            drilldownSeries.push({
                name: key,
                id: key,
                data: value
            });
        });
		
		console.dir(drilldownSeries);
		
		//sheet 초기화
		var cfg = {
		    Chart : {
				Animation : true,
		        PlotBackgroundColor : "#FAFAFA",
				PlotBorderColor:"#A9AEB1",
		        PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#D7E1F3"],
						[1, "#FFFFFF"]
					]
				},
				BorderColor : "#84888B",
				Type : "column",
				marginRight: 10
		    },
		    title: {
                text: 'Browser market shares. November, 2013'
            },
            XAxis : {
            	type: 'category'
		    },
		    YAxis : {
		    	title: {
                    text: 'Total percent market share'
                }
		    },
		    legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}%'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: brandsData
            }],
            drilldown: {
                series: drilldownSeries
            }
		};
		
		myChart.SetOptions(cfg);
		
		myChart.Draw();
	});
	
	
</script>
<title>DrillDown 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>
	<div id="title">DrillDown 예제</div>
	<div id="desc">
		Spline 형태로 주기적으로 정해진 시간에 따라 데이터를 차트에 추가한다.
	</div>

	<div id="functionArea">
		
	</div>
	
	<div id="viewArea">
		<script type="text/javascript">
			createIBChart("myChart", "100%", "400px");
		</script>
	</div>
</div>
Browser Version	Total Market Share
<pre id="tsv" style="display:none">
Microsoft Internet Explorer 8.0	26.61%
Microsoft Internet Explorer 9.0	16.96%
Chrome 18.0	8.01%
Chrome 19.0	7.73%
Firefox 12	6.72%
Microsoft Internet Explorer 6.0	6.40%
Firefox 11	4.72%
Microsoft Internet Explorer 7.0	3.55%
Safari 5.1	3.53%
Firefox 13	2.16%
Firefox 3.6	1.87%
Opera 11.x	1.30%
Chrome 17.0	1.13%
Firefox 10	0.90%
Safari 5.0	0.85%
Firefox 9.0	0.65%
Firefox 8.0	0.55%
Firefox 4.0	0.50%
Chrome 16.0	0.45%
Firefox 3.0	0.36%
Firefox 3.5	0.36%
Firefox 6.0	0.32%
Firefox 5.0	0.31%
Firefox 7.0	0.29%
Proprietary or Undetectable	0.29%
Chrome 18.0 - Maxthon Edition	0.26%
Chrome 14.0	0.25%
Chrome 20.0	0.24%
Chrome 15.0	0.18%
Chrome 12.0	0.16%
Opera 12.x	0.15%
Safari 4.0	0.14%
Chrome 13.0	0.13%
Safari 4.1	0.12%
Chrome 11.0	0.10%
Firefox 14	0.10%
Firefox 2.0	0.09%
Chrome 10.0	0.09%
Opera 10.x	0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%</pre>
</body>
</html>